<template>
    <h1>康复理疗列表展示</h1>
    <a href="/AddFood">新增食谱</a><br>
    <a href="/AddKang">新增康复理疗</a><br>
    食谱标题：
    <input type="text" v-model="name">
    <input type="button" value="查询" @click="Show">
    <input type="button" value="批量修改" @click="Update(1)">


    <table border="1">
        <thead>
            <th>
                <input type="checkbox" v-model="head" @change="Quan" >
            </th>
            <th>项目名称</th>
            <th>项目编码</th>
            <th>佣金</th>
            <th>服务人数</th>
            <th>服务时长</th>
            <th>项目说明</th>
            <th>状态</th>
            <th>操作</th>
        </thead>

        <tbody v-for="item in info">
            <td>
                <input type="checkbox" v-model="body" :checked="list"  >
            </td>
            <td>{{item.name}}</td>
            <td>{{item.bianhao}}</td>
            <td>{{item.price}}元</td>
            <td>{{item.people}}人</td>
            <td>{{item.time}}小时</td>
            <td>{{item.shuoming}}</td>
            <td>{{item.state==true?"启用":"禁用"}}</td>
            <td>
                <input type="button" value="删除" @click="Delete(item.id)">
                <input type="button" value="修改" @click="Update(item.id)">
            </td>
        </tbody>
    </table> 

    <input type="button" value="首页" @click="Fan(1)">
    <input type="button" value="上一页" @click="Fan(Fen.pageindex-1)">
    <input type="button" value="下一页" @click="Fan(Fen.pageindex+1)">
    <input type="button" value="尾页" @click="Fan(Fen.zongye)">
    共{{ Fen.zonghang }}条数据，共{{ Fen.zongye }}页，当前{{ Fen.pageindex }}页,每页{{ Fen.pagesize }}条

</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter();
onMounted(()=>{
    Show();
})

const Fen=ref({
    pageindex:1,
    pagesize:2,
    zongye:0,
    zonghang:0,
})

const Fan=(f:any)=>{
    if(f>=1&&f<=Fen.value.zongye)
    {
        Fen.value.pageindex=f;
        Show();
    }
    else{
        alert("您输入的页码有误")
    }
}

const info=ref([{
    "id": 0,
      "name": "",
      "bianhao": "",
      "price": 0,
      "people": 0,
      "time": 0,
      "shuoming": "",
      "state": true,
      "delete": 0
}])


const name=ref("")

const Show=()=>{
    axios.get("https://localhost:7052/api/Kang/Show",{
        params:{
            name:name.value,
            pageindex:Fen.value.pageindex,
            pagesiza:Fen.value.pagesize,
        }
    })
    .then(res=>{
       info.value=res.data.zongShu
       Fen.value.zonghang=res.data.zongHang
       Fen.value.zongye=res.data.zongYe
    })
    .catch(error=>{
        console.log(error)
    })
}

const head=ref(false)
const list=ref(false)
const body=ref([0])

const Quan=()=>{
    if(head.value==true){
        list.value=true;
        body.value=info.value.map((a:any)=>{
            return a.id;
        })
    }
    else{
        list.value=false
    }
}

const Delete=(id:number)=>{
    if(confirm("确认删除吗？")){
        axios.delete("https://localhost:7052/api/Kang/Delete",{
        params:{
            id:id
        }
    })
    .then(res=>{
        if(res.data>0){
            alert("删除成功")
            Show();
        }
        else{
            alert("删除失败")
        }
    })
    .catch(error=>{
        console.log(error)
    })
    }
}

const Update=(id:number)=>{
    if(confirm("确认修改吗？")){
        axios.delete("https://localhost:7052/api/Kang/UpdByState",{
        params:{
            id:id
        }
    })
    .then(res=>{
        if(res.data>0){
            alert("修改成功")
            Show();
        }
        else{
            alert("修改失败")
        }
    })
    .catch(error=>{
        console.log(error)
    })
    }
}
</script>
